﻿@page "/underline"
@using VectSharp;
@using VectSharp.SVG;

<style>
	table {
		table-layout: fixed;
	}

	td {
		width: 200px;
		padding: 10px;
	}
</style>

<div style="width: 100vw; height: 100vh; position: relative;">
	<div style="width: calc(100% - 400px); height: 100%; position: absolute; top: 0; left: 0; text-align: center">
		<img src="@imgSource" style="max-width: 100%; max-height: 100%; margin-top: 50vh; transform: translate(0, -50%)" />
	</div>

	<div style="width: 400px; height: 100vh; position: absolute; top: 0; right: 0;">
		<table style="margin-top: 50vh; transform: translate(0, -50%)">
			<tr>
				<td colspan="2" style="width: 400px; text-align: center">
					<MatTextField @bind-Value="@text" OnInput="(e) => text = e.Value.ToString()" Label="Text"></MatTextField>
				</td>
			</tr>
			<tr>
				<td>
					<MatNumericUpDownField Label="Underline position"
										   @bind-Value=@position
										   Step="0.01"
										   DecimalPlaces=3>
					</MatNumericUpDownField>
				</td>
				<td>
					<MatNumericUpDownField Label="Underline thickness"
										   @bind-Value=@thickness
										   Minimum="0"
										   Step="0.01"
										   DecimalPlaces=3>
					</MatNumericUpDownField>
				</td>
			</tr>
			<tr>
				<td>
					<MatCheckbox @bind-Value="@skipDescenders">Skip descenders</MatCheckbox>
				</td>
				<td>
					<MatCheckbox @bind-Value="@followItalicAngle">Follow italic angle</MatCheckbox>
				</td>
			</tr>
			<tr>
				<td colspan="2" style="width: 400px; text-align: center; padding-top: 0">
					<div style="display: inline-block; position: relative">
						<span class="mdc-floating-label mdc-floating-label--float-above" style="margin-left:0.5em; margin-top: 2em; color: rgba(0, 0, 0, 0.6)">Line cap</span><br />
						<MatRadioGroup @bind-Value="@lineCap" TValue="int">
							<MatRadioButton Value="0" TValue="int">Butt</MatRadioButton>
							<MatRadioButton Value="1" TValue="int">Round</MatRadioButton>
							<MatRadioButton Value="2" TValue="int">Square</MatRadioButton>
						</MatRadioGroup>
					</div>
				</td>


			</tr>

		</table>
	</div>
</div>

@code {

	private double _position = 0.106;
	private double position
	{
		get
		{
			return _position;
		}
		set
		{
			_position = value;
			Render();
		}
	}


	private double _thickness = 0.073;
	private double thickness
	{
		get
		{
			return _thickness;
		}
		set
		{
			_thickness = value;
			Render();
		}
	}


	private int _lineCap = 0;
	private int lineCap
	{
		get
		{
			return _lineCap;
		}

		set
		{
			_lineCap = value;
			Render();
		}
	}

	private bool _skipDescenders = true;
	private bool skipDescenders
	{
		get
		{
			return _skipDescenders;
		}
		set
		{
			_skipDescenders = value;
			Render();
		}
	}

	private bool _followItalicAngle = true;
	private bool followItalicAngle
	{
		get
		{
			return _followItalicAngle;
		}
		set
		{
			_followItalicAngle = value;
			Render();
		}
	}

	private string _text = "VectSharp";
	private string text
	{
		get
		{
			return _text;
		}
		set
		{
			_text = value;
			Render();
		}
	}


	private string imgSource = "";

	protected override Task OnInitializedAsync()
	{
		Render();
		return Task.CompletedTask;
	}

	public void Render()
	{
		Page page = new Page(100, 25);
		Graphics graphics = page.Graphics;

		FontFamily family = FontFamily.ResolveFontFamily(FontFamily.StandardFontFamilies.HelveticaBoldOblique);
		Font font = new Font(family, 15, true);

		// Set the position of the underline.
		font.Underline.Position = position;

		// Set the thickness of the underline.
		font.Underline.Thickness = thickness;

		// Set the line cap.
		font.Underline.LineCap = (LineCaps)lineCap;

		// Do not skip descenders.
		font.Underline.SkipDescenders = skipDescenders;

		// Follow the italic angle.
		font.Underline.FollowItalicAngle = followItalicAngle;

		// Fill the text, including the underline.
		graphics.FillText(50 - font.MeasureText(text).Width * 0.5, 12.5, text, font, Colours.Black, TextBaselines.Middle);

		using (MemoryStream ms = new MemoryStream())
		{
			page.SaveAsSVG(ms);
			ms.Seek(0, SeekOrigin.Begin);

			using (StreamReader sr = new StreamReader(ms))
			{
				this.imgSource = "data:image/svg+xml;base64," + Convert.ToBase64String(System.Text.Encoding.UTF8.GetBytes(sr.ReadToEnd()));
			}
		}
	}
}
